<!-- 批次信息仅用于编目 -->
<script setup lang="ts">
import {
  NForm,
  NInput,
  NSelect,
  NButton,
  NFormItem,
  NDatePicker,
  NInputNumber,
  NTreeSelect,
  useMessage,
  type SelectOption
} from 'naive-ui'
import { useRoute } from 'vue-router'
import { sendRequest } from '@/utils/api'
import { onMounted, ref, reactive } from 'vue'
import type { BatchDetailModel } from '@/api/batchV2'
import type { DicTreeModel } from '@/api/dic'
import type { HttpResponse } from '@/utils/http'
import useRouteQuery from '@/hooks/useRouteQuery'
const props = defineProps({
  id:String
})
const emit = defineEmits(['backData'])
const route = useRoute()
const message = useMessage()
const clueMethodOptions = reactive<DicTreeModel[]>([])
const clueMethodLoading = ref(false)
const queryClueMethodOptions = async () => {
  clueMethodLoading.value = true
  try {
    const [error, res] = await sendRequest<HttpResponse<DicTreeModel[]>>({
      module: 'dic',
      api: 'getTree',
      override: {
        params: {
          dicCode: 'A30'
        }
      }
    })

    if (error) throw error
    if (res.code !== 0) throw new Error(res.msg)
    clueMethodOptions.length = 0
    clueMethodOptions.push(...(res.data[0] ? res.data[0].children || [] : []))
  } catch (error) {
    console.error(error)
  } finally {
    clueMethodLoading.value = false
  }
}

const batchInfo = ref({} as any)
const queryBatchInfo = async () => {
  const [error, res] = await sendRequest({
    module: 'collectProcess',
    api: 'commonBatchInfo',
    uri:{
      batchCode:props.id
    }
  })
  if (error) return message.error(error.message)
  if (res.data.endTime) {
    res.data.endTime = res.data.endTime.slice(0, 10)
  }
  if (res.data.startTime) {
    res.data.startTime = res.data.startTime.slice(0, 10)
  }
  if (res.data.solicitNum) {
    res.data.solicitNum = Number(res.data.solicitNum)
  }
  emit('backData', res.data.batchVo)
  batchInfo.value = res.data.batchVo || {}
}
useRouteQuery('id', () => {
  if (route.query.id)  
  queryBatchInfo()
})
onMounted(() => {
  queryClueMethodOptions()
  queryBatchInfo()
})
</script>

<template>
  <DetailFormProvider>
    <NForm
      disabled
      label-placement="left"
      label-width="140rem"
      :show-feedback="false"
      :show-require-mark="false"
      class="bi-card form"
    >
    <NFormItem label="批次编号：">
        <NInput
          :value="batchInfo.batchCode"
          placeholder="/"
        />
      </NFormItem>
      <NFormItem label="批次名称：">
        <NInput
          :value="batchInfo.batchName"
          placeholder="/"
        />
      </NFormItem>
      <NFormItem label="征集方式：">
        <NTreeSelect
          :value="batchInfo.solicitMethodCode"
          :options="clueMethodOptions"
          placeholder="/"
          key-field="code"
          label-field="name"
        />
      </NFormItem>
      <NFormItem label="接收时间：">
        <NDatePicker
          :formatted-value="batchInfo.receiveTime"
          type="datetime"
          placeholder="/"
        />
      </NFormItem>

      <NFormItem label="藏家：">
        <NInput
          :value="batchInfo.collector"
          placeholder="/"
        />
        <!-- <NInput
          v-model:value="batchInfo.transferorPhone"
          placeholder="/"
                /> -->
      </NFormItem>
      <NFormItem label="接收人：">
        <NInput
          :value="batchInfo.receiver"
          placeholder="/"
        />
      </NFormItem>
     
    </NForm>
  </DetailFormProvider>
</template>

<style lang="scss" scoped>

.bi-card {
  padding: 20rem;
  // background-color: #e1e1e1;

  &.form {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16rem 32rem;

    .n-form-item--textarea {
      grid-column: 1 / -1;
    }

    .n-date-picker,
    .n-input-number {
      flex: 1;
    }
  }
}
</style>
